Adding tenderly simulation by ragingrahul · Pull Request #49 · hyperlane-xyz/hyperlane-explorer

ragingrahul · 2023-07-24T22:50:36Z

Description

Implemented tenderly transaction simulation

To Know

TENDERLY_USER,TENDERLY_PROJECT,TENDERLY_ACCESS_KEY can be found USER & PROJECT and ACCESS-KEY

Related Issues

#2488

vercel · 2023-07-24T22:50:39Z

@ragingrahul is attempting to deploy a commit to the Abacus Works Team on Vercel.

A member of the Team first needs to authorize it.

jmrossy

Thanks @ragingrahul for the PR! This is a good start but it's incomplete and a bit sloppy. Is there a way to use the Tenderly APIs without a user's secret access key? If not, how did you intend to get that from the user?

jmrossy · 2023-07-25T18:24:15Z

package.json

    "@metamask/jazzicon": "https://github.com/jmrossy/jazzicon#7a8df28974b4e81129bfbe3cab76308b889032a6",
    "@rainbow-me/rainbowkit": "^0.11.0",
    "@tanstack/react-query": "^4.24.10",
+    "axios": "^1.4.0",


Please use the browser native fetch API, no need to add a new library just for a POST request :)

jmrossy · 2023-07-25T18:26:26Z

src/features/messages/cards/TransactionCard.tsx

-function CallDataModal({ debugResult }: { debugResult?: MessageDebugResult }) {
+function CallDataModal({ debugResult,chainId }: { debugResult?: MessageDebugResult,chainId:ChainId }) {
  const [isOpen, setIsOpen] = useState(false);
+  const disabled=false


Why do you have a var here if it never changes?

jmrossy · 2023-07-25T18:27:22Z

src/features/messages/cards/TransactionCard.tsx

+          <button onClick={async()=>{
+            handleClick()
+            await simulateCall({contract,handleCalldata,chainId})


Move this line to the click handler

jmrossy · 2023-07-25T18:28:00Z

src/features/messages/cards/TransactionCard.tsx

+  const [buttonText,setButtonText]=useState<string>("Simulate Handle Call")
  if (!debugResult?.calldataDetails) return null;
  const { contract, handleCalldata } = debugResult.calldataDetails;
+  function handleClick() {


event handlers (like click) should use lambda (arrow fn) syntax to be bound correctly.

jmrossy · 2023-07-25T18:29:01Z

src/features/messages/cards/TransactionCard.tsx

+function CallDataModal({ debugResult,chainId }: { debugResult?: MessageDebugResult,chainId:ChainId }) {
  const [isOpen, setIsOpen] = useState(false);
+  const disabled=false
+  const [buttonText,setButtonText]=useState<string>("Simulate Handle Call")


The <string> type is inferred so it's unnecessary here.

Change to Simulate call with Tenderly

jmrossy · 2023-07-25T18:33:36Z

src/features/messages/cards/TransactionCard.tsx

+      save_if_fails: true, 
+      simulation_type: 'full',
+      network_id: chainId, 
+      from: '0xdc6bdc37b2714ee601734cf55a05625c9e512461',//can be any address, doesn't matter


Use the 0 address if you just need a placeholder (ethers.constants.zeroAddress)

jmrossy · 2023-07-25T18:34:53Z

src/features/messages/cards/TransactionCard.tsx

+      gas: 8000000,
+      gas_price: 0,
+      value: 0,


You'll need to use the real values from the message for an accurate simulation.

src/features/messages/cards/TransactionCard.tsx

jmrossy · 2023-07-25T18:37:53Z

src/features/messages/cards/TransactionCard.tsx

+    }
+  );
+  console.timeEnd('Simulation');
+  console.log(resp.data)


Use the logger utility instead of console and add a message to provide context for the data you're logging

jmrossy · 2023-07-25T18:38:29Z

src/features/messages/cards/TransactionCard.tsx

+    }
+  )
+  console.log(share)
+  window.location.assign(`https://dashboard.tenderly.co/shared/simulation/${resp.data.simulation.id}`)


Please open the tenderly window in a new tab

jmrossy

Good progress but please be more mindful to stay consistent with other parts of the codebase

src/consts/config.ts

jmrossy · 2023-08-01T15:39:56Z

src/features/messages/cards/TransactionCard.tsx

+    setDisabled(false)
+    setShowSpinner(false)


The disabled state always equals the showSpinner state so there's no reason to create 2 state vars. Can you please use the replace them with a single [loading, setLoading] state that is the inverse of disabled now?

jmrossy · 2023-08-01T15:43:01Z

src/features/messages/cards/TransactionCard.tsx

+        from: '0x0000000000000000000000000000000000000000',//can be any address, doesn't matter
+        to: contract,
+        input:handleCalldata,
+        gas: Number(message.totalGasAmount),


Please use BigNumber.from(message.totalGasAmount).toNumber()

jmrossy · 2023-08-01T15:43:27Z

src/features/messages/cards/TransactionCard.tsx

+        to: contract,
+        input:handleCalldata,
+        gas: Number(message.totalGasAmount),
+        gas_price: Number(message.totalPayment)/Number(message.totalGasAmount),


Use the computeAvgGasPrice util function here. It handles possible rounding issues:
https://github.com/hyperlane-xyz/hyperlane-explorer/blob/main/src/features/messages/cards/GasDetailsCard.tsx#L168

jmrossy · 2023-08-01T15:44:14Z

src/features/messages/cards/TransactionCard.tsx

+        value: 0,
+  }
+  const resp=await fetch(
+    `https://explorer.hyperlane.xyz/api/simulation`,{


Remove the https://explorer.hyperlane.xyz prefix. It's implied when coming from the same domain and will break the feature in dev builds

src/features/messages/cards/TransactionCard.tsx

src/pages/api/simulation.ts

jmrossy · 2023-08-01T15:47:17Z

src/pages/api/simulation.ts

+  const data=req.body
+
+  const resp = await fetch(
+    `https://api.tenderly.co/api/v1/account/${TENDERLY_USER}/project/${TENDERLY_PROJECT}/simulate`,


Check that these env vars are defined and throw a helpful here at the top if they're not

jmrossy · 2023-08-01T15:48:48Z

src/pages/api/simulation.ts

+      },
+    }
+  )
+  res.json(simulationId)


Wrap the result in a success/failure result shape: https://github.com/hyperlane-xyz/hyperlane-explorer/blob/main/src/features/api/utils.ts

jmrossy

Almost there!

jmrossy · 2023-08-02T17:58:19Z

src/features/messages/cards/TransactionCard.tsx

+
+

Spacing? Please run yarn prettier and the files will get auto-formatted :)

jmrossy · 2023-08-02T18:02:50Z

src/features/messages/cards/TransactionCard.tsx

+
+}
+
+function computeAvgGasPrice(unit: string, gasAmount?: BigNumber.Value, payment?: BigNumber.Value) {


Why did you duplicate this function here? Please de-dupe with the copy in GasDetailsCard and move it to messages/utils.ts

src/types.ts

jmrossy · 2023-08-02T18:06:23Z

src/features/messages/cards/TransactionCard.tsx

  );
 }
+async function simulateCall({contract,handleCalldata,chainId,message}:{contract:string,handleCalldata:string,chainId:ChainId,message:Message}){
+


Wrap the function contents here in a try/catch and show an error message with toast.error on failure

Didn't wrap this in try/catch, rather wrapped the backend call which returns failure call and checking if the call is success or failure here.

jmrossy

Code looks okay, just one small comment, but there should be no yarn.lock file changes. That's likely why the CI is failing.

jmrossy · 2023-08-03T21:26:19Z

src/pages/api/simulation.ts

+    )
+    res.json(successResult(simulationId))
+  } catch (error) {
+    res.json(failureResult("Could not simulate"))


Please change to "Error preparing Tenderly simluation"

jmrossy · 2023-08-09T15:07:56Z

src/pages/api/simulation.ts

+export default async function handler(req, res) {
+  const data = req.body;
+  if (!TENDERLY_ACCESS_KEY || !TENDERLY_PROJECT || !TENDERLY_USER) {
+    console.log('ENV not defined');


Use logger instead of console, I believe this will raise a linter warning

Change log message to something more descriptive: Tenderly key, project, or user not defined in env

jmrossy · 2023-08-09T15:08:19Z

src/pages/api/simulation.ts

+  const data = req.body;
+  if (!TENDERLY_ACCESS_KEY || !TENDERLY_PROJECT || !TENDERLY_USER) {
+    console.log('ENV not defined');
+    res.json(failureResult('Explorer Issues'));


Change to 'Tenderly credentials missing'

jmrossy · 2023-08-09T15:09:18Z

src/features/messages/cards/TransactionCard.tsx

          </p>
          <LabelAndCodeBlock label="Recipient contract address:" value={contract} />
          <LabelAndCodeBlock label="Handle function input calldata:" value={handleCalldata} />
+          <button onClick={handleClick} disabled={loading} className="underline text-blue-400">


Show only when not loading (see feedback on discord).
Please also reduce text size: text-sm

Adding tenderly simulation

9cb9315

ragingrahul requested review from jmrossy and yorhodes as code owners July 24, 2023 22:50

jmrossy suggested changes Jul 25, 2023

View reviewed changes

Making the asked edits

b637643

ragingrahul closed this Jul 28, 2023

ragingrahul reopened this Jul 28, 2023

ragingrahul added 2 commits July 29, 2023 23:24

Added the tenderly call to backend

cb1ac3e

Changed the request url

dd164e9

jmrossy reviewed Aug 1, 2023

View reviewed changes

ragingrahul added 2 commits August 2, 2023 17:37

Made the changes

f3625c2

Made changes 2

d511ea0

jmrossy reviewed Aug 2, 2023

View reviewed changes

Made changes 3

276ad83

jmrossy reviewed Aug 3, 2023

View reviewed changes

yarn.lock changes and prettier

41f1041

jmrossy reviewed Aug 9, 2023

View reviewed changes

nooma-42 mentioned this pull request Jan 1, 2024

Explorer should simulate with tenderly hyperlane-xyz/hyperlane-monorepo#2488

Closed

github-actions bot mentioned this pull request Feb 16, 2026

Weekly Repo Status — 2026-02-16 hyperlane-xyz/hyperlane-monorepo#8112

Closed


		}

		function computeAvgGasPrice(unit: string, gasAmount?: BigNumber.Value, payment?: BigNumber.Value) {

Conversation

ragingrahul commented Jul 24, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

To Know

Related Issues

Uh oh!

vercel bot commented Jul 24, 2023

Uh oh!

jmrossy left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jmrossy left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jmrossy left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jmrossy left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

ragingrahul commented Jul 24, 2023 •

edited

Loading

jmrossy left a comment •

edited

Loading